<template>
	<view>
		<uv-popup ref="popupBox" mode="bottom" :round="10" @maskClick="closeFunc">
			<view class="title">上传设计图</view>
			<scroll-view class="scroll-view" scroll-y>
				<view class="uv-form-box">
					<uv-form labelPosition="top" :model="formData" ref="form" labelWidth="auto" :labelStyle="formItemStyle">
						<uv-form-item label="平面图 (.jpg,.png,.gif)">
							<uv-upload :fileList="formData.plan_drawing_image" :maxCount="8" accept="image"
								@afterRead="afterRead($event, 'plan_drawing_image')" @delete="deletePic($event, 'plan_drawing_image')"
								width="110rpx" height="110rpx">
								<view class="upload-box">
									<view class="upload-item">
										<uv-icon name="plus" color="#DDE2EE" size="14"></uv-icon>
									</view>
								</view>
							</uv-upload>
						</uv-form-item>
						<uv-form-item label="平面图文件 (.dwg,.pdf,.zip,.pptx)" prop="after_sales_file">
							<uv-upload :fileList="formData.plan_drawing" :maxCount="8" accept="file"
								@afterRead="afterRead($event, 'plan_drawing')" @delete="deletePic($event, 'plan_drawing')"
								width="110rpx" height="110rpx">
								<view class="upload-box">
									<view class="upload-item">
										<uv-icon name="plus" color="#DDE2EE" size="14"></uv-icon>
									</view>
								</view>
							</uv-upload>
						</uv-form-item>
						<uv-form-item label="效果图 (.jpg,.png,.gif)" prop="after_sales_file">
							<uv-upload :fileList="formData.effect_drawing_image" :maxCount="8" accept="image"
								@afterRead="afterRead($event, 'effect_drawing_image')"
								@delete="deletePic($event, 'effect_drawing_image')" width="110rpx" height="110rpx">
								<view class="upload-box">
									<view class="upload-item">
										<uv-icon name="plus" color="#DDE2EE" size="14"></uv-icon>
									</view>
								</view>
							</uv-upload>
						</uv-form-item>
						<uv-form-item label="效果图文件 (.zip,.ppt,.ppsx,.pptx,.psd)" prop="after_sales_file">
							<uv-upload :fileList="formData.effect_drawing" :maxCount="8" accept="file"
								@afterRead="afterRead($event, 'effect_drawing')" @delete="deletePic($event, 'effect_drawing')"
								width="110rpx" height="110rpx">
								<view class="upload-box">
									<view class="upload-item">
										<uv-icon name="plus" color="#DDE2EE" size="14"></uv-icon>
									</view>
								</view>
							</uv-upload>
						</uv-form-item>
						<uv-form-item label="施工图 (.jpg,.png,.gif)" prop="after_sales_file">
							<uv-upload :fileList="formData.construction_drawing_image" :maxCount="8" accept="image"
								@afterRead="afterRead($event, 'construction_drawing_image')"
								@delete="deletePic($event, 'construction_drawing_image')" width="110rpx" height="110rpx">
								<view class="upload-box">
									<view class="upload-item">
										<uv-icon name="plus" color="#DDE2EE" size="14"></uv-icon>
									</view>
								</view>
							</uv-upload>
						</uv-form-item>
						<uv-form-item label="施工图文件 (.zip,.ppt,.ppsx,.pptx,.psd)" prop="after_sales_file">
							<uv-upload :fileList="formData.construction_drawing" :maxCount="8" accept="file"
								@afterRead="afterRead($event, 'construction_drawing')"
								@delete="deletePic($event, 'construction_drawing')" width="110rpx" height="110rpx">
								<view class="upload-box">
									<view class="upload-item">
										<uv-icon name="plus" color="#DDE2EE" size="14"></uv-icon>
									</view>
								</view>
							</uv-upload>
						</uv-form-item>
					</uv-form>
				</view>
			</scroll-view>
			<view class="btn-box">
				<uv-button @click="closeFunc" text="取 消" customTextStyle="font-weight: 400;font-size: 28rpx;color: #8F8F8F;"
					customStyle="width: 180rpx;height: 80rpx;background: #FFFFFF;border-radius: 16rpx;border: 2rpx solid #E3E3E3;margin-bottom:20rpx;"></uv-button>
				<uv-button @click="formSubmit" type="primary" text="提 交"
					customTextStyle="font-weight: 400;font-size: 28rpx;color: #FFFFFF;"
					customStyle="width: 500rpx;height: 80rpx;background: #3B75FF;border-radius: 16rpx;margin-bottom:20rpx;"></uv-button>
			</view>
		</uv-popup>
	</view>
</template>

<script>
	export default {
		props: ['show', 'project_info'],
		data() {
			return {
				formData: {
					plan_drawing_image: [],
					effect_drawing_image: [],
					construction_drawing_image: [],
					plan_drawing: [],
					effect_drawing: [],
					construction_drawing: []
				},
				delete_arr: [],
				// 判断是否有修改
				isChange: false,
				imgLength: 0
			};
		},
		computed: {
			formItemStyle() {
				return {
					color: '#828A9D',
					fontSize: '26rpx'
				};
			}
		},
		watch: {
			show(value) {
				if (value) {
					this.getDetail();
				} else {
					this.$refs.popupBox.close();
				}
			}
		},
		mounted() {},
		methods: {
			afterRead(e, type) {
				console.log(e, type);
				this.isChange = true;
				this.formData[type].push({
					url: e.file.url,
					type
				});
			},
			deletePic(e, type) {
				console.log(e, type);
				this.isChange = true;
				if (e.file.file_id) {
					e.file.type = type;
					e.file.delete = true;
					this.delete_arr.push(e.file);
				}
				let index = e.index;
				this.formData[type].splice(index, 1);
			},
			closeFunc() {
				this.$emit('close', false);
			},
			formSubmit() {
				let formData = this.formData;
				let arr = [
					...formData.plan_drawing_image,
					...formData.effect_drawing_image,
					...formData.construction_drawing_image,
					...formData.plan_drawing,
					...formData.effect_drawing,
					...formData.construction_drawing
				];
				console.log(arr);
				if (arr.length == 0) {
					uni.showToast({
						title: '请至少上传一种！',
						icon: 'none'
					});
					return;
				}
				// 修改时判断
				if (arr.length == this.imgLength && !this.isChange) {
					uni.showToast({
						title: '没有改动，无需提交',
						icon: 'none'
					});
					return;
				}
				uni.showLoading({
					mask: true,
					title: '信息提交中...'
				});

				if (this.project_info.status > 1060) {
					let upArr = [];
					arr.map((item) => {
						if (!item.file_id) {
							upArr.push(item);
						}
					});
					console.log(upArr, this.delete_arr, 'ssss');
					let obj = {
						project_id: this.project_info.id,
						plan_drawing_image: [],
						effect_drawing_image: [],
						construction_drawing_image: [],
						plan_drawing: [],
						effect_drawing: [],
						construction_drawing: [],
						delete_arr: this.delete_arr,
						remark: ''
					};

					if (upArr.length != 0) {
						this.$upload(upArr).then((res) => {
							res.arrResult.map((item) => {
								obj[item.w_type].push(item);
								delete item.w_type;
							});
							console.log(obj, 'sss');
							this.khUpdDesignDrawings(obj);
						});
					} else {
						this.khUpdDesignDrawings(obj);
					}
				} else {
					this.$upload(arr).then((res) => {
						let obj = {
							project_id: this.project_info.id,
							plan_drawing_image: [],
							effect_drawing_image: [],
							construction_drawing_image: [],
							plan_drawing: [],
							effect_drawing: [],
							construction_drawing: [],
							remark: ''
						};
						res.arrResult.map((item) => {
							obj[item.w_type].push(item);
							delete item.w_type;
						});
						console.log(obj, 'sss');

						this.$Api.khUploadDesignDrawings(obj).then((res) => {
							console.log(res, '上传设计图');
							uni.hideLoading();
							if (res.code == 200) {
								this.$emit('close', false);
								this.$emit('lazy');
							}
							uni.showToast({
								title: res.code == 200 ? '操作成功' : res.message,
								icon: res.code == 200 ? 'success' : 'error'
							});
						});
					});
				}
			},

			khUpdDesignDrawings(obj) {
				this.$Api.khUpdDesignDrawings(obj).then((res) => {
					console.log(res, '更新');
					uni.hideLoading();
					if (res.code == 200) {
						this.$emit('close', false);
						this.$emit('lazy');
					}
					uni.showToast({
						title: res.code == 200 ? '操作成功' : res.message,
						icon: res.code == 200 ? 'success' : 'error'
					});
				});
			},
			getDetail() {
				this.$Api
					.khGetProjectDetails({
						project_id: this.project_info.id,
						tab_type: 3
					})
					.then((res) => {
						console.log(res, '详情');
						if (res.code == 200) {
							res.data = res.data.DesignDrawings;
							res.data.plan_drawing_image.map((item) => {
								item.url = item.file_url;
							});
							this.formData.plan_drawing_image = res.data.plan_drawing_image;

							res.data.effect_drawing_image.map((item) => {
								item.url = item.file_url;
							});
							this.formData.effect_drawing_image = res.data.effect_drawing_image;

							res.data.construction_drawing_image.map((item) => {
								item.url = item.file_url;
							});
							this.formData.construction_drawing_image = res.data.construction_drawing_image;

							res.data.plan_drawing.map((item) => {
								item.url = item.file_url;
							});
							this.formData.plan_drawing = res.data.plan_drawing;

							res.data.effect_drawing.map((item) => {
								item.url = item.file_url;
							});
							this.formData.effect_drawing = res.data.effect_drawing;

							res.data.construction_drawing.map((item) => {
								item.url = item.file_url;
							});
							this.formData.construction_drawing = res.data.construction_drawing;

							this.$refs.popupBox.open();
							this.imgLength =
								res.data.plan_drawing_image.length +
								res.data.effect_drawing_image.length +
								res.data.construction_drawing_image.length +
								res.data.plan_drawing.length +
								res.data.effect_drawing.length +
								res.data.construction_drawing.length;
						}
					});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.title {
		font-size: 32rpx;
		width: 100%;
		line-height: 100rpx;
		text-align: center;
	}

	.btn-box {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		box-sizing: border-box;
		margin-top: 30rpx;
	}

	.scroll-view {
		width: 100%;
		max-height: 50vh;
		background-color: #fff;

		// padding: 0 30rpx;
		// box-sizing: border-box;
		.uv-form-box {
			padding: 0 30rpx !important;
		}

		.file-box {
			width: 100%;
			display: flex;
			flex-direction: row-reverse;
		}

		.file-list {
			width: 100%;
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			.file-item {
				display: flex;
				justify-content: space-between;
				margin-top: 10rpx;
				margin-left: 10rpx;
				padding: 10rpx;
				background-color: #f8f8f8;
				width: 90%;

				.file-name {
					font-size: 24rpx;
					overflow: hidden;
					/* 确保溢出文本会被隐藏 */
					white-space: nowrap;
					/* 确保文本在一行内显示 */
					text-overflow: ellipsis;
					/* 使用省略号显示文本溢出的部分 */
					width: 80%;
				}
			}

			.file-media {
				width: 150rpx;
				height: 150rpx;
				margin: 0 27rpx 22rpx 0;
				overflow: hidden;
				border-radius: 10rpx;
				position: relative;

				&:nth-child(4n) {
					margin-right: 0;
				}

				.media-item {
					width: 100%;
					height: 100%;
				}

				.icon-box {
					position: absolute;
					z-index: 1;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					background-color: rgba(0, 0, 0, 0.6);
					width: 70rpx;
					height: 70rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 50%;
				}

				.del-icon {
					width: 60rpx;
					height: 40rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					position: absolute;
					right: 10rpx;
					top: 10rpx;
					z-index: 1;
					background-color: rgba(0, 0, 0, 0.6);
					border-radius: 10rpx;
				}
			}
		}
	}

	.upload-box {
		width: 100%;
		display: flex;
		align-items: center;
		flex-wrap: wrap;

		.upload-item {
			width: 110rpx;
			height: 110rpx;
			border-radius: 8rpx;
			border: 2rpx solid #dde2ee;
			margin: 0 10rpx 10rpx 0;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>